@font-face { font-family: 'Acme'; src: url('fonts/acme/Acme-Regular.ttf') format('truetype'); }

.g1 { color: green; }
.r1 { color: red; }
.b1 { color: blue; }
.p1 { color: pink; }
.y1 { color: yellow; }
.w1 { color: white; background-color: black; }
.bl1 {color: black; }
.m1 { color: magenta; }
.r2 { color: maroon; }
.p2 { color: purple; }
.g2 { color: grey; }
.o1 { color: orange; }
.g3 { color: #2bd64b; }
.b2 { color: #2bb7ff; }
.b3 { color: #6b4cff; }
.m2 { color: #ff4ecb; }

:root{
      --card-bg: rgba(255,255,255,0.86);
      --muted: #555;
      --accent: #0b67c2;
      --radius: 14px;
    }
    html,body{
      height:100%;
      margin:0;
      font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      background: linear-gradient(90deg,
        #ff3b3b 0%,
        #ff8a00 15%,
        #ffef00 30%,
        #2bd64b 45%,
        #2bb7ff 60%,
        #6b4cff 75%,
        #ff4ecb 90%);
      background-size: 400% 400%;
      animation: rainbow 18s ease infinite;
    }
    @keyframes rainbow{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }

    .wrap{
      max-width: 960px;
      margin: 32px auto;
      padding: 28px;
      border-radius: var(--radius);
      background: var(--card-bg);
      box-shadow: 0 10px 40px rgba(0,0,0,0.18);
      backdrop-filter: blur(6px);
    }

    header{
      text-align:center;
      margin-bottom: 8px;
    }
    header h1{
      margin:0 0 6px 0;
      font-size:24px;
      letter-spacing:0.2px;
    }
    header p { margin:0; color:var(--muted); font-size:14px; }

    section{
      margin: 20px 0;
      padding: 18px;
      border-radius: 10px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(0,0,0,0.04);
    }
    section h2{
      margin: 0 0 10px 0;
      font-size:18px;
    }
    section p { margin: 8px 0; color:#222; line-height:1.5; white-space:pre-line; }
    a {
      color: var(--accent);
      text-decoration: none;
      font-weight:600;
    }
    a:hover { text-decoration:underline; }
    footer { text-align:center; color:var(--muted); font-size:13px; margin-top:18px; }
    /* small screens */
    @media (max-width:560px){
      .wrap{ margin:12px; padding:16px; }
      section{ padding:12px; }
      header h1{ font-size:20px; }
    }

.fAc { font-family: 'Acme', sans-serif; }